<!DOCTYPE html>
<html lang="zh"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>(客服部)-企业客户详情-会员卡详情</title>
    <link rel="icon" href="favicon.ico" type="images/ico">
    <meta name="author" content="dc">
    <link rel="stylesheet" type="text/css" href="/css/materialdesignicons.min.css">
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/css/style.min.css">
    <link href="/js/bootstrap-table/bootstrap-table.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/js/jquery-confirm/jquery-confirm.min.css"/>
    <link rel="stylesheet" href="/css/bootstrapValidator.min.css" />
    <!--时间选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css"/>
    <!--日期选择插件-->
    <link rel="stylesheet" href="/js/bootstrap-datepicker/bootstrap-datepicker3.min.css"/>
    <link rel="stylesheet" href="/css/skin.css"/>
    <link rel="stylesheet" type="text/css" href="/css/daterangepicker.css" />
    <!-- 多选下拉 -->
    <link rel="stylesheet" href="/css/bootstrap-multiselect.css" type="text/css"/>
    <link rel="stylesheet" href="/css/bootstrap-select.css" type="text/css"/>
    <link rel="stylesheet" href="/css/skin.css" />
    <!--客户详情自定义css-->
    <link rel="stylesheet" href="/css/tableAll.css">
    <link rel="stylesheet" href="/css/csd/customerManager/customerCardDetail.css">

</head>

<body>
    <div class="container-fluid p-t-15">
        <div class="row">

            <div class="card ">
                <div class="card-header">
                    <h1>会员卡详情</h1>

                </div>
                <div class="card-body">
                    <div class="well form-well" >
                        <div class="basics-init">
                            <div class="header-init">
                                <p>基本信息</p>
                                <div class="card-actions pull-right edit-right">
                                    <button class="btn btn-link" id="editInfo" data-toggle="modal" data-target="#editInforModal" onclick="infoShow()">编辑<i class="mdi mdi-tune"></i></button>
                                </div>
                            </div>


                            <div class="tab-list">
                                <input type="hidden" id="customerProductDetailMemberCardId" th:value="${vo?.customerProductDetailMemberCardId}">
                                <input type="hidden" id="contractId" th:value="${vo?.contractId}">


                                <table>
                                    <tr>
                                        <td>会员卡卡号：<span class="text" id="memberCardNumber" th:text="${vo?.memberCardNumber?:'暂无'}"></span></td>
                                        <td>会员卡密码：
                                            <span class="text" th:text="${vo?.memberCardPassword?:'暂无'}"></span>
                                        </td>
                                        <td>所属合同：<span class="text" id="contractNumber" th:text="${vo?.contractNumber?:'暂无'}"></span></td>
                                    </tr>
                                    <tr>
                                        <td>所属订单：<span class="text" th:text="${vo?.orderNumber?:'暂无'}"></span></td>
                                        <td>产品名称：<span class="text" th:text="${vo?.productName?:'暂无'}"></span></td>
                                        <td>
                                            所属产品码：
                                            <span class="text" th:text="${vo?.finishOrderProductNum?:'暂无'}"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>所属分公司：<span class="text" th:text="${vo?.companyName?:'暂无'}"></span></td>
                                        <td>客户联系人：<span class="text" id="contactNameText" th:text="${vo?.contactName?:'暂无'}"></span></td>
                                        <td>
                                            客户联系方式：
                                            <span class="text" id="contactDetailsText" th:text="${vo?.contactDetails?:'暂无'}"></span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>会员卡开始时间：<span class="text" id="startTmText" th:text="${vo?.startTm?:'暂无'}"></span></td>
                                        <td>会员卡结束时间：<span class="text" id="endTmText" th:text="${vo?.endTm?:'暂无'}"></span></td>
                                    </tr>
                                </table>
                            </div>


                        </div>


                        <div class="header-file">
                            <div class="header-init">
                                <h3>服务明细</h3>
                                <div class="card-actions pull-right edit-right">
                                    <button class="btn btn-link" id="editService" data-toggle="modal" data-target="#editServiceInfo" onclick="detailClick()">修改<i class="mdi mdi-tune"></i></button>
                                </div>
                            </div>
                            <input type="hidden" id="detailId" >


                            <div class="centerContant centerContantMoney">
                                <div><span class="after-content blueColor">现场参会</span><span class="text AmountData " id="xcch"></span></div>
                                <div><span class="after-content yellowColor">行业会剩余次数</span> <span class="text AmountData " id="hyhsycs"></span></div>
                                <div><span class="after-content greenColor">分钟数</span><span class="text AmountData " id="minutes"></span></div>
                                <div><span class="after-content redColor">直播点数</span><span class="text AmountData " id="livePoints"></span></div>
                                <div><span class="after-content darkColor">用户答疑数量</span><span class="text AmountData " id="userquantity"></span></div>

                            </div>

                            <div class="centerContant customer-remarks">
                                <div class="customer-name">
                                    <p>
                                        <span class="icon-img icon-name">客户联系人: </span>
                                        <span class="name-tel" id="centerContactName"></span>
                                    </p>
                                    <p>
                                        <span class="icon-img icon-tel">客户联系方式: </span>
                                        <span class="name-tel" id="mobile"></span>

                                    </p>
                                </div>
                                <div class="remark-info">
                                    <span>信息备注:</span>
                                    <textarea name="" id="remarks" class="" disabled></textarea>
                                </div>
                            </div>


                        </div>


                        <div class="header-file">
                            <h3>刷卡记录</h3>
                            <table id="cardRecord"></table>
                        </div>

                        <div class="header-file">
                            <h3>视频观看记录</h3>
                            <table id="videoRecord"></table>
                        </div>

                        <div class="header-file">
                            <h3>电话答疑拨打记录</h3>
                            <table id="telephoneRecords"></table>
                        </div>

                        <div class="header-file">
                            <h3>直播报名预约</h3>
                            <table id="liveReservation"></table>

                        </div>

                        <div class="header-file">
                            <h3>直播购买记录</h3>
                            <table id="liveRecord"></table>

                        </div>

                        <div class="header-file">
                            <h3>点播购买记录</h3>
                            <table id="onDemandRecord"></table>

                        </div>


                    </div>


                </div>
            </div>



        </div>


    </div>

    <!-- 修改客户信息弹框 -->
    <div class="modal fade" tabindex="-1" role="dialog" id="editInforModal">
        <div class="modal-dialog" role="document" style="width: 60%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>编辑信息</h4>
                </div>
                <form id="customerForm">
                    <div class="modal-body">
                        <div class="row" style="padding: 0 90px;">

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >客户联系人</label>
                                <div class="form-content">
<!--                                    customerName-->
                                    <input type="text" class="form-control" id="contactName" placeholder="请选择客户联系人" name="contactName">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >客户联系方式</label>
                                <div class="form-content">
<!--                                    customerInfor-->
                                    <input type="text" class="form-control" id="contactDetails" placeholder="请选择客户联系方式" name="contactDetails">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label" >会员卡开始时间</label>
                                <div class="form-content">
                                    <input type="text" class="form-control date-input" id="startTm" placeholder="请选择会员卡开始时间" name="startTm" autocomplete="off">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label" >会员卡结束时间</label>
                                <div class="form-content">
                                    <!--                                    customerInfor-->
                                    <input type="text" class="form-control date-input" id="endTm" placeholder="请选择会员卡结束时间" name="endTm" autocomplete="off">
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="btn btn-primary form-group sure-remind"  onclick="modifyInfo()">确定</div>
                        <div class="btn btn-default" data-dismiss="modal" onclick="modifyClose()">取消</div>
                    </div>
                </form>
            </div>
        </div>
    </div>


<!--    修改明细     -->

    <div class="modal fade" tabindex="-1" role="dialog" id="editServiceInfo">
        <div class="modal-dialog" role="document" style="width: 60%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>修改明细</h4>
                </div>
                <form id="detailsForm">
                    <div class="modal-body">
                        <div class="row" style="padding: 0 90px;">



                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >现场参会</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="xcchInput" placeholder="请输入现场参会" name="xcchInput">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >行业会剩余次数</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="hyhsycsInput" placeholder="请输入行业会剩余次数" name="hyhsycsInput">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >分钟数</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="minutesInput" placeholder="请输入分钟数" name="minutesInput">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >直播点数</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="livePointsInput" placeholder="请输入直播点数" name="livePointsInput">
                                </div>
                            </div>
<!-- 联系人,联系方式非必填-->
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label " >联系人</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="detailContactName" placeholder="请输入联系人" name="detailContactName">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label " >联系方式</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="detailMobile" placeholder="请输入联系方式" name="detailMobile">
                                </div>
                            </div>
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >备注</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="detailRemarks" placeholder="请输入直播点数" name="detailRemarks">
                                </div>
                            </div>





                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="btn btn-primary form-group sure-remind"  onclick="modifyDetailed()">确定</div>
                        <div class="btn btn-default" data-dismiss="modal" onclick="detailedClose()">取消</div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!--    刷卡记录     -->

    <div class="modal fade" tabindex="-1" role="dialog" id="editCardRecord">
        <div class="modal-dialog" role="document" style="width: 60%;">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>修改刷卡记录</h4>
                </div>
                <form id="cardForm">
                    <div class="modal-body">
                        <div class="row" style="padding: 0 90px;">

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >姓名</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="tabName" placeholder="请输入姓名" name="tabName">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >刷卡时间</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="tabTime" placeholder="请输入刷卡时间" name="tabTime">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >类别</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="tabStatus" placeholder="请输入类别" name="tabStatus">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >数量</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="tabNumber" placeholder="请输入数量" name="tabNumber">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >课程名称</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="tabCourse" placeholder="请输入课程名称" name="tabCourse">
                                </div>
                            </div>

                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 form-group">
                                <label class="control-label label-required" >刷卡地点</label>
                                <div class="form-content">
                                    <input type="text" class="form-control" id="tabPlace" placeholder="请输入刷卡地点" name="tabPlace">
                                </div>
                            </div>





                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="btn btn-primary form-group sure-remind"  onclick="editCard()">确定</div>
                        <div class="btn btn-default" data-dismiss="modal" onclick="cardClose()">取消</div>
                    </div>
                </form>
            </div>
        </div>
    </div>

</body>

<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/perfect-scrollbar.min.js"></script>
<!--标签插件-->
<script src="/js/jquery-tags-input/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="/js/main.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/popper.min.js"></script>
<script type="text/javascript" src="/js/jquery.cookie.min.js"></script>
<script src="/js/jquery-confirm/jquery-confirm.min.js"></script>
<!-- 多选框下拉 -->
<script type="text/javascript" src="/js/bootstrap-multiselect.js"></script>
<script type="text/javascript" src="/js/bootstrap-select.js"></script>
<script type="text/javascript" src="/js/bootstrap.lyear.dropdowntree.min.js"></script>
<!--时间选择插件-->
<script src="/js/bootstrap-datetimepicker/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-datetimepicker/locale/zh-cn.js"></script>
<!--日期选择插件-->
<script src="/js/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<script src="/js/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<script type="text/javascript" src="/js/crm/common/dataRangePicker.min.js"></script>

<script type="text/javascript" src="/js/bootstrapValidator.min.js"></script>

<script src="/js/crm/common/companyUserSelect.js"></script>
<!--客户详情自定义js-->
<script src="/js/crm/csd/customerManager/customerCardDetail.js"></script>
</html>